﻿@{
    ViewBag.Title = "LocalStorage";
}
<h2>
    HTML 5 - LocalStorage</h2>
<style>
    label, input[type=submit]
    {
        display: block;
    }
    textarea
    {
        width: 300px;
        height: 150px;
    }
</style>
<form>
<label for="comment">
    Your Comment</label>
<textarea placeholder="Bitte Kommentar hier eingeben" required id="comment"></textarea>
<input type="submit" />
</form>
<script>
    //Prüfen ob localstorage unterstützt wird
    if (Modernizr.localstorage) {
        var updateInterval;

        //Wenn im localStorage ein Wert enthalten ist, dann wird dieser hier geladen
        $('#comment').val(localStorage.comment || '');

        //Das Element erhält den Focus
        $('#comment').on('focus', function () {
            var self = $(this);
            //Alle 5 sekunden den Speichervorgang ausführen
            updateInterval = setInterval(function () {
                localStorage.comment = self.val();
            }, 5000);
        }).on('blur', function () {
            //Wenn der Nutzer den Focus des Controls verlässt
            clearInterval(updateInterval);
        });

        //Das Storage event wird gefeuert sobald man den localstorage mit add oder del Item manipuliert
        //wird nur ausgelöst wenn man sich in einem anderen Tab befindet (man die Seite quasi 2 mal geöffnet hat)
        $(window).on('storage', function () {
            $('#comment').val(localStorage.comment);
        });

        //ein Objekt im LocalStorage ablegen, geht nur im JSON Format
        var obj = {
            first: 'Squad',
            last: 'Wuschel'
        };

        //Ablegen
        localStorage.info = JSON.stringify(obj);

        //Auslesen

        //Ein Formular "serialisieren" damit man es "speichern" kann bevor es abgeschickt wird
        (function () {
            var form = $('form');

            if (localStorage.formData) {
                (function bindStorageToForm() {
                    var data = localStorage.formData,
                        sp = data.split('&'),
                        pair;

                    $.each(sp, function (i, val) {
                        pair = val.split('=');
                        if (!pair[1]) return true; //continue

                        if (pair[1] === 'on') {
                            //checkbox or radio
                            form[0][pair[0]].checked = true;
                        }

                        form[0][pair[0]].value = unescape(pair[1]).replace(/\+/g, ' ');
                    });

                })();
            }

            setInterval(function () {
                localStorage.formData = form.serialize();
            }, 3000);

        })();
    }

</script>
